<template>
  <chart :auto-resize="true" :options="options"> </chart>
</template>

<script>
import { graphic } from "echarts/lib/export";
export default {
  data() {
    return {
      options: {
        color: ["#3398DB"],
        tooltip: {
          tooltip: {
            trigger: "item",
            formatter: " <br/>{b}: {c} ({d}%)",
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: " ", // 默认为直线，可选为：'line' | 'shadow'
          },
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // "show" : false,
            splitLine: {
              show: false,
            },

            axisLine: {
              //y轴
              show: false,
            },
            data: ["在线", "离线", "报警"],
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#02D9FD",
                fontSize: 16,
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: function () {
                return "";
              },
            },

            type: "value",
            axisLine: {
              //y轴
              show: false,
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            splitLine: {
              //网格线
              show: false,
            },
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: "30%",
            data: [20, 25, 14],
            itemStyle: {
              //通常情况下：
              normal: {
                barBorderRadius: [15, 15, 0, 0],
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#02D9FD",
                    fontSize: 15,
                  },
                },
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function (params) {
                  var colorList = [
                    ["#48EAFF", "rgba(72, 234, 255, 0)"],
                    ["#5148FF", "rgba(72, 234, 255, 0)"],
                    ["#FF48AB", "rgba(72, 234, 255, 0)"],
                  ];
                  var index = params.dataIndex;
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length;
                  }
                  return new graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorList[index][0],
                    },
                    {
                      offset: 1,
                      color: colorList[index][1],
                    },
                  ]);
                },
              },
            },
          },
        ],
      },
    };
  },
};
</script>
